<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>店铺商品管理</title>
    <meta th:replace="website/uc/inc_head.html" />
    <link rel="stylesheet" href="/static/css/uc.css">
    <style>
        select{padding:10px;}

    </style>
</head>
<body>
<div th:replace="website/template/top.html"></div>
<!--面包-->
<div class="bread-crumb" style="padding:2.67vmin 2.67vmin;">
    <span th:replace="website/uc/inc_breadcrumb.html"></span>
    <span class="cur">店铺商品管理</span>
</div>
<div class="content-page uc-page" id="app">
    <!--内容-->
    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="grid">店铺商品管理</a></legend>
    </fieldset>
    <div>
        <select name="" id="" v-model="category">
            <option value="">请选择分类商品</option>
            <option :value="item.id" v-for="item in listCategory">{{item.title}}</option>
        </select>
    </div>
    <table class="layui-table" lay-skin="" lay-even v-cloak>
        <thead>
        <tr>
            <th>产品图片</th>
            <th>产品信息</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in listProduct" :key="item.id">
            <td>
                <a :href="item.cover" rel="lightbox"><img class="product-cover" :src="item.cover" alt=""></a>

            </td>
            <td>
                <div>型号：{{item.title}}</div>
                <div>零售价：￥{{item.guidePrice}}</div>
                <!--<div>最低价：￥{{item.lowestPrice}}</div>-->
            </td>
            <td>
                <button class="layui-btn layui-btn-sm layui-btn-success" v-if="item.own==0" @click="actShopOwnSettle(item.id,1)">设为在售</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" v-if="item.own==1" @click="actShopOwnSettle(item.id,0)">取消在售</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script th:src="@{/static/js/vue.js}"></script>
<script>
    // const layer = layui.layer
    var layerIndex
    const vm = new Vue({
        el: '#app'
        ,data: {
            category:"",//类别id,
            listProduct: [],//数据
            listCategory: [],//数据
        },
        created(){
            this.fetchCategoryList()
            this.fetchProductList() //应该选择了分类才加载，这里用于开发时马上显示数据
        },
        methods:{
            //加载分类数据
            fetchCategoryList (){
                console.log('读取数据')
                layerIndex = layer.load(0, {shade: [0.1,'#fff']});
                $.ajax({
                    type: 'get',
                    url:'/web/category/list',
                    data:{page: 1, limit: 9999, checked: true}
                }).done((res)=>{
                    if(res.data.length > 0 ){
                        this.listCategory = res.data
                    }
                }).always(function(){
                    setTimeout(()=>{
                        layer.close(layerIndex)
                    },500)
                })
            },
            //加载产品数据（sql没有使用limit 20210923）
            fetchProductList (){
                console.log('读取数据')
                layerIndex = layer.load(0, {shade: [0.1,'#fff']});
                $.ajax({
                    type: 'get',
                    url:'/web/shop/products',
                    data:{page: 1, limit: 100000, category:this.category}
                }).done((res)=>{
                    if(res.data.length > 0 ){
                        this.listProduct = res.data
                    }
                    this.$nextTick(() => {
                        setTimeout(() => {
                            $("a[rel^='lightbox']").picbox({/* Put custom options here */}, null, function (el) {
                                return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
                            });
                        }, 200)
                    })
                }).always(function(){
                    setTimeout(()=>{
                        layer.close(layerIndex)
                    },500)

                })
            },

            /**
             * 选择本店在售的操作
             * @param pid  产品id
             * @param act 动作，1加入，0就是取消，用来处理提交地址
             */
            actShopOwnSettle(pid,act){
                let msg = act == 1 ?'确定设为本店销售吗':'确定取消吗'
                layer.confirm(msg, {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    layer.closeAll()//先关闭对话层
                    layer.load(0, {shade: [0.1,'#fff']});
                    //判断提交url
                    let url = act == 1
                        ? '/web/shop/onSaleProduct'
                        : '/web/shop/cancelSaleProduct'
                    $.ajax({
                        type: 'post',
                        url:url,
                        data:{pid:pid}
                    }).done((res)=>{
                        if(res.code == 0 ){
                            layer.msg('操作成功')
                            vm.fetchProductList() //重新加载数据
                        }else{
                            layer.msg('操作失败了')
                        }
                    }).always(function(){
                        setTimeout(()=>{
                            layer.closeAll()
                        },500)
                    })
                }, function(){

                });
            },

        },
        watch:{
            category:function(_new,_old){
                /* 清空旧列表数据 */
                this.listProduct = [];
                if(_new){
                   this.fetchProductList()
                }
            }
        }
    })
</script>
</body>
</html>